<template>
  <div class="device-detail-wrapper">
    <vm-common-header :pageTitle="pageTitle" :goBack="goBack"></vm-common-header>
    <div class="device-detail-info">
      <ul>
        <li class="info-item clearfix align-right">
          <div class="name">编号</div>
          <div class="value">{{deviceInfo.code}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">SN号</div>
          <div class="value">{{deviceInfo.sn}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">名称</div>
          <div class="value">{{deviceInfo.name}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">设备状态</div>
          <div class="value">{{deviceInfo.status}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">所属项目</div>
          <div class="value">{{deviceInfo.project}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">注册人</div>
          <div class="value">{{deviceInfo.reguser}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">注册时间</div>
          <div class="value">{{deviceInfo.regtime}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">联系方式</div>
          <div class="value">{{deviceInfo.phone}}</div>
        </li>
        <li class="info-item clearfix align-left">
          <div class="name">安装位置：</div>
          <div class="value">{{deviceInfo.address}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">GIS坐标</div>
          <div class="value">{{deviceInfo.gis}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">登录用户名</div>
          <div class="value">{{deviceInfo.login_name}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">登入密码</div>
          <div class="value">{{deviceInfo.login_pwd}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">接入MQTT</div>
          <div class="value value-btn" @click="handleSelectMqtt">{{deviceInfo.mqtt}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">通道号</div>
          <div class="value value-btn" @click="handleSelectPipe">{{deviceInfo.pipe}}</div>
        </li>
        <li class="info-item clearfix align-left">
          <div class="name">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</div>
          <div class="value">{{deviceInfo.other}}</div>
        </li>
      </ul>
    </div>
    <mt-popup v-model="mqttPopupVisible" popup-transition="popup-fade" class="mqtt-popup">
      <div class="popup-title">-请选择-</div>
      <div class="popup-picker">
        <ul>
          <li v-for="item in mqttOptions" :key="item.id" @click="handleMqttChange(item.id)" :class="[{'active': item.id === currMqtt}]">{{ item.name }}</li>
        </ul>
      </div>
      <div class="popup-footer">
        <mt-button type="default" @click="mqttPopupVisible = false">取消</mt-button>
        <mt-button type="danger" @click.native="handleConfirmMqtt">确定</mt-button>
      </div>
    </mt-popup>
    <mt-popup v-model="pipePopupVisible" popup-transition="popup-fade" class="pipe-popup">
      <div class="popup-title">-请选择-</div>
      <div class="popup-picker">
        <ul>
          <li v-for="item in pipeOptions" :key="item.id" @click="handlePipeChange(item.id)" :class="[{'active': item.id === currPipe}]">{{ item.name }}</li>
        </ul>
      </div>
      <div class="popup-footer">
        <mt-button type="default" @click="pipePopupVisible = false">取消</mt-button>
        <mt-button type="danger" @click.native="handleConfirmPopup">确定</mt-button>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import vmCommonHeader from "@/components/vm-common-header.vue";
export default {
  components: {
    "vm-common-header": vmCommonHeader
  },
  data() {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      mqttPopupVisible: false,
      pipePopupVisible: false,
      deviceInfo: {
        code: "dkslafd554545",
        sn: "SN0025544558544225",
        name: "设备名称dskdn",
        status: "启用",
        project: "项目A",
        reguser: "王津津",
        regtime: "2018-12-12",
        phone: "13490872378",
        address: "北京北京市昌平区某某镇某某街道某某小区xx号",
        gis: "[xxxxx]经度 [xxxxx]纬度",
        login_name: "1qaz",
        login_pwd: "*****",
        mqtt: "MQTT",
        pipe: "通道1",
        other: "备注备注"
      },
      currMqtt: '01',
      currPipe: '01',
      mqttOptions: [
        { name: 'MQTT1', id: '01' },
        { name: 'MQTT2', id: '02' },
        { name: 'MQTT3', id: '03' },
        { name: 'MQTT4', id: '04' },
        { name: 'MQTT5', id: '05' }
      ],
      pipeOptions: [
        { name: '通道1', id: '01' },
        { name: '通道2', id: '02' },
        { name: '通道3', id: '03' },
        { name: '通道4', id: '04' },
        { name: '通道5', id: '05' }
      ]
    };
  },
  methods: {
    handleSelectMqtt() {
      this.mqttPopupVisible = true;
    },
    handleSelectPipe() {
      this.pipePopupVisible = true;
    },
    handleMqttChange(id) {
      this.currMqtt = id;
    },
    handlePipeChange(id) {
      this.currPipe = id;
    },
    handleConfirmMqtt() {
      this.mqttPopupVisible = false;
    },
    handleConfirmPipe() {
      this.pipePopupVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.device-detail-info {
  background-color: #fff;
  height: 100%;
  text-align: left;
  overflow-y: auto;
  ul {
    padding: 0 20px;
    li {
      padding: 20px;
      border-bottom: 1px solid #eee;
      line-height: 42px;
      font-size: 28px;
      color: #666;

      .name {
        width: 150px;
        float: left;
      }

      .value {
        margin-left: 150px;
      }

      &.align-right {
        .value {
          float: right;

          &.value-btn {
            display: inline-block;
            width: 180px;
            height: 60px;
            border-radius: 10px;
            background-color: #f34b50;
            color: #fff;
            text-align: center;
            line-height: 60px;
          }
        }
      }
    }
  }
}

.mint-popup {
  width: 670px;
  border-radius: 10px;
  .popup-title {
    font-size: 30px;
    line-height: 82px;
    text-align: center;
    color: #666;
  }

  .popup-footer {
    background: #ffffff;
    border-top: 1px solid #eeeeee; /* no */
    width: 100%;
    height: 120px;
    border-top: 1px solid #eee; /* no */
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
    button {
      width: 220px;
      height: 80px;
      margin: 21px 20px 12px 30px;
      border-radius: 10px; /* no */
      font-size: 28px;
      &:first-child {
        border: 1px solid #f34b50; /* no */
        background-color: #fff;
        color: #f34b50;
        font-size: 24px;
      }
      &:last-child {
        background-color: #f34b50;
        color: #fff;
        font-size: 24px;
      }
    }
  }

  .popup-picker {
    height: 300px;

    ul {
      height: 300px;
      overflow-y: auto;
      li {
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        color: #999;

        &.active {
          background-color: #eee;
          color: #333;
        }
      }
    }
  }
}

.clearfix::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
</style>
